<template>
  <div class="x-warnitem">
    <div class="warnitem-head">
      <div class="item-name">采集时间</div>
      <div class="item-txt">IMSI</div>
      <div class="item-location">归属地</div>
    </div>
    <vue-scroll
      :class-option="optionSetting"
      class="scroll-ctx"
      :class="{ 'scroll-h': isName }"
      :data="listData"
    >
      <ul class="ctx-item" style="height:calc(100%-28px)">
        <li
          @click="onRowClick(item)"
          v-for="(item, index) in listData"
          class="item-li"
          :key="index"
        >
          <span class="time">
            {{
            item.collectTime
            .replace("T", " ")
            .replace("Z", " ")
            .substr(5, 14)
            }}
          </span>
          <span class="txt">{{ item.imsi }}</span>
          <span class="location">{{item.ownerShip}}</span>
        </li>
      </ul>
    </vue-scroll>
  </div>
</template>
<script>
import { GetImsiInfo } from "@/api/portalApi";
import VueScroll from "vue-seamless-scroll";
export default {
  name: "xreportitem",
  data() {
    return {
      listData: [],
      timer:null
    };
  },
  props: {
    leader: {
      type: String,
      default: ""
    },
    isName: {
      type: Boolean,
      default: true
    },
  },
  computed: {
    optionSetting() {
      return {
        step: 0.4, // 数值越大速度滚动越快

        limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length

        hoverStop: true, // 是否开启鼠标悬停stop

        direction: 1, // 0向下 1向上 2向左 3向右

        openWatch: true, // 开启数据实时监控刷新dom

        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1

        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3

        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      };
    }
  },
  components: {
    VueScroll
  },
  mounted() {
    this.getReportList();
      if(this.timer){
        clearInterval(this.timer)
      }else{
        this.timer=setInterval(()=>{
          this.getReportList();
        },18000000)
      }
  },
   destroyed(){
      console.log('destroyed')
      clearInterval(this.timer)
    },
  computed: {
    optionSetting() {
      return {
        step: 0.4, // 数值越大速度滚动越快

        limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length

        hoverStop: true, // 是否开启鼠标悬停stop

        direction: 1, // 0向下 1向上 2向左 3向右

        openWatch: true, // 开启数据实时监控刷新dom

        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1

        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3

        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      };
    }
  },
  watch: {
    leader: function() {
      this.getReportList();
    }
  },
  methods: {
    // 获取数据
    async getReportList() {
      var _this = this;
      try {
        let params = {
          placeId: this.$storage.get("place").leader
        };
        if (this.id) {
          Object.assign(params, { id: this.id });
        }
        this.stop();
        let reportList = await GetImsiInfo(params);
        // reportList.rows.reverse();
        console.log("---" + JSON.stringify(reportList));
        let arr = reportList.data;

        // this.reportDatas = arr;
        //return;
        this.listData = arr;
        //console.log(this.listData);
        if (this.listData.length > 0) {
          this.play();
        }
      } catch (error) {
        console.log(error);
      }
    },
    change() {
      //change、paly表格数据动态滚动
      this.listData.push(this.listData[0]); //把第一条数据插入数组最有一条
      this.listData.shift(); //删除数组中第一条数据
    },
    play() {
      this.timer = setInterval(this.change, 2000); //每两秒执行一次插入删除操作
    },
    stop() {
      clearInterval(this.timer);
    }
  }
};
</script>

<style lang="less" scoped>
.x-warnitem {
  width: 100%;
  height: 100%;
  padding: 0 18px;
  box-sizing: border-box;
  .warnitem-head {
    width: 100%;
    height: 28px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 11px;
    color: #fff;
    .item-name {
      flex: 0.25;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: normal;
      text-align: left;
      font-size: 14px;
    }
    .item-txt {
      flex: 0.3;
      padding-left: 20px;
      box-sizing: border-box;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: normal;
      text-align: left;
      font-size: 14px;
    }
    .item-status {
      flex: 0.15;
      text-align: center;
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .item-location {
      flex: 0.3;
      text-align: center;
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .scroll-ctx {
    width: 100%;
    height: 100%;
    overflow: hidden;
    &.scroll-h {
      height: calc(100% - 28px);
    }
    .ctx-item {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      list-style: none;
      .item-li {
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 28px;
        margin: 0;
        padding: 0;
        font-size: 14px;
        color: #fff;
        cursor: pointer;
        .time {
          flex: 0.25;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-break: normal;
          text-align: left;
          font-size: 14px;
        }
        .txt {
          flex: 0.3;
          padding-left: 20px;
          box-sizing: border-box;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-break: normal;
          text-align: left;
          font-size: 14px;
        }
        .status {
          overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
          flex: 0.15;
          text-align: center;
          font-size: 14px;
        }
        .location{
            overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
          flex: 0.3;
          text-align: center;
          font-size: 14px;
        }
      }
    }
  }
}
.scroll {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .animatedTop {
    transition: all 0.5s linear;
  }
  ul,
  li {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  li {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 5px;
  }
}
</style>
